import React from 'react'

import { Modal, Button,Input,Row, Col,Radio,Message } from 'antd';
import api from '../../../api/pay';
const QRCode = require('qrcode.react');
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

import './index.less'

export default class PayModal extends React.Component {
    state = { 
        visible: false, 
        visible2: false,
        title:"充值", // 弹框标题
        title2:"",
        money:"",
        type:1,  // 充值类型
        payType:1,
        qrCode:"www.baidu.com",//二维码地址
        codeSize:280//二维码大小
    }
    //创建订单参数
    data={
        type:this.state.type,
        total_fee:1,
        body:this.state.title
    }
    //定时刷新器
    interval ={
        id:"",//定时器的ID
        time:5000,   //刷新的时间
        preId:"" //关联的ID
    }
    componentWillReceiveProps = (nextProps) => {
       // console.log(this.props);
      //  console.log(nextProps);
        if(nextProps.showPay.showPay){
            this.showPayModal(nextProps.showPay.payTitle,nextProps.showPay.payType);
        }
     }
    showPayModal = (title,type) => {
        this.setState({
            visible: true,
            title:title==null?"充值":title,
            type:type
        });
        this.data.body=title==null?"充值":title;
    }
    hidePayModal = () => {
        this.setState({
            visible: false,
            visible2: false
        });
        window.clearInterval(this.interval.id); 
    }
    chagePayType = (e) =>{
        this.setState({
            payType:e.target.value
        });
    }
    apay =()=>{
        api.post('/getApay',{...this.data}).then((data) => {
            const result= data.data;
            if(result.code == 0){
                this.setState({
                    title2:"请打开支付宝扫一扫，扫描图中的二维码进行充值！请勿关闭对话框！！！",
                    visible: false,
                    visible2: true,
                    qrCode:result.data.qr_code
                });
                this.interval.preId=result.data.out_trade_no;
                window.clearInterval(this.interval.id); 
                this.interval.id=window.setInterval(this.checkPayState,this.interval.time); 
            }else{
              Message.error(result.message);
            }
          });
    }
    xpay =()=>{
        api.post('/getXpay',{...this.data}).then((data) => {
            const result= data.data;
            if(result.code == 0){
                this.setState({
                    title2:"请打开微信扫一扫，扫描图中的二维码进行充值！请勿关闭对话框！！！",
                    visible: false,
                    visible2: true,
                    qrCode:result.data.code_url
                });
                this.interval.preId=result.data.out_trade_no;
                window.clearInterval(this.interval.id); 
                this.interval.id=window.setInterval(this.checkPayState,this.interval.time); 
            }else{
              Message.error(result.message);
            }
          });
        // 
    }
    checkPayState =()=>{
       // console.log("检查充值状态！");
        api.post('/checkPay',{id : this.interval.preId}).then((data) => {
            const result= data.data;
            if(result.code == 0){
                Message.success("充值成功！");
                window.clearInterval(this.interval.id); 
                this.setState({
                    visible: false,
                    visible2: false
                });
                this.props.payCallback();
            }else{
              //Message.error(result.message);
            }
        });
    }
    chageMoney=(e)=>{
        this.data.total_fee=e.target.value;
    }
    nextPay = () =>{
       if(this.state.payType==1){
           this.apay();
           return;
        }
        this.xpay();
    }
    render() {
        return (
            <div>
            <Modal
                title={this.state.title}
                visible={this.state.visible}
                onOk={this.nextPay}
                onCancel={this.hidePayModal}
                okText="下一步"
                cancelText="取消"
            >
            <div id="pay_div">
                <Row gutter={8}>
                    <Col span={2} />
                    <Col span={6}>请输入充值金额：</Col>
                    <Col span={12} > <Input id="money" onChange={this.chageMoney}  placeholder="请输入充值金额" /></Col>
                </Row>
                <Row gutter={8}>
                    <Col span={2} />
                    <Col span={6} >请选择充值方式：</Col>
                    <Col span={12} > 
                        <RadioGroup defaultValue="1" onChange={this.chagePayType}>
                            <RadioButton value="1">支付宝充值</RadioButton>
                            <RadioButton value="2">微信充值</RadioButton>
                        </RadioGroup>
                    </Col>
                </Row>
              </div>
            </Modal>

            <Modal
                title={this.state.title2}
                visible={this.state.visible2}
                onOk={this.hidePayModal}
                onCancel={this.hidePayModal}
                okText="确认"
                cancelText="取消"
            >
             <div id="pay_code">
                 <QRCode value={this.state.qrCode}  size={this.state.codeSize} />
              </div>
            </Modal>
            </div>
        );
    }
}

